<template>
	<view class="pb124">
		<view class="bg-img">
			<!-- 个人信息部分 -->
			<view class="user auto dflex alc pl32">
				<view class="user-image dflex alc jcc mr18">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view>
					<view class="fs34 fw600" style="color: #260E03;">{{ userInfo.username }}</view>
					<view class="dflex mt12 user-name">
						<view
							class="mr28 textc white fs26"
							v-if="verify === 1"
							style="background: linear-gradient(180deg, #ff8964 0%, #fd4b2c 100%);color:#fff"
						>
							已实名认证
						</view>
						<view
							class="textc fs26"
							v-if="verify === 0"
							style="background: linear-gradient(153deg, #ebeae9 0%, #dad5cf 100%);color:#74706a"
						>
							待审核
						</view>
						<view
							class="textc fs26"
							v-if="verify === 2"
							style="background: linear-gradient(153deg, #ebeae9 0%, #dad5cf 100%);color:#74706a"
						>
							审核未通过
						</view>
						<view
							class="textc fs26"
							v-if="verify === 0 && verify === 1 && verify === 2"
							style="background: linear-gradient(153deg, #ebeae9 0%, #dad5cf 100%);color:#74706a"
						>
							未实名认证
						</view>
					</view>
				</view>
			</view>
			<view
				style="width: 690rpx; height: 200rpx;background-color: #fff;border-radius: 20rpx;"
				class="mt40 mb40 auto posir dflex alc jcc"
			>
				<view class="posia" style="right: 20rpx;top: 20rpx;" @click="show = !show">
					<u-icon name="eye-fill" size="28px" v-if="show"></u-icon>
					<u-icon name="eye-off" size="28px" v-if="!show"></u-icon>
				</view>
				<view class="dflex flexc alc fs36 fw900 mt60">
					<view>累积收益</view>
					<view class="mt20" v-if="!show" style="color: #b41210;">******</view>
					<view v-if="show" class="mt20" style="color: #b41210;">￥{{ userInfo.money }}</view>
				</view>
			</view>
		</view>

		<!-- 个人信息部分结束 -->
		<!-- 我认购的产品 -->
		<view class="dflex alc pl30 pr30 jcsb" style="margin-top: -50rpx;">
			<view class="fs34 fw600" style="color: #260E03;">我认购的产品</view>
			<view class="dflex alc">
				<view class="fs30 color9" @click="getSomeOrder">查看更多</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<!-- 我认购的产品 -->
		<!-- 认购的产品组件 -->
		<view class="mt20">
			<UserProduct
				v-for="(item, index) in orderList.slice(0, 1)"
				:key="item.order_id"
				:data="item"
				@handerDtrails="handerDtrails"
			></UserProduct>
		</view>
		<!-- 认购的产品组件 -->

		<!-- 更多设置 -->
		<view class="fs34 fw600 pl30 mt40" style="color: #260E03;">更多设置</view>
		<!-- 更多设置盒子 -->
		<view class="set auto mt20 pl48 pr44 pt54 pb48">
			<view
				class="dflex alc jcsb mb74 set-item"
				v-for="(item, index) in setList"
				:key="item.id"
				@click="handerChange(index)"
			>
				<view class="dflex alc">
					<image
						:src="item.img"
						mode="heightFix"
						style="width: 62rpx;height: 62rpx;"
						class="mr20"
					></image>
					<view>{{ item.title }}</view>
				</view>
				<u-icon name="arrow-right" color="#D2D5D7" size="36"></u-icon>
			</view>
		</view>
		<view class="pb64 mt44">
			<view class="outlogin auto textc fw600 fs32" @click="loginout">退出登录</view>
		</view>
		<TabBar :select="3"></TabBar>
	</view>
</template>

<script setup>
import { getUserInfo, getOrderList } from '@/utils/api.js';
import { ref, onMounted } from 'vue';
import indexVue from '../index/index.vue';
//个人数据展示
let userInfo = ref({});
let show = ref(false);
let setList = [
	{
		id: 1,
		title: '实名认证',
		img: '../../static/renzheng.png'
	},
	{
		id: 2,
		title: '用户反馈',
		img: '../../static/fankui.png'
	},
	{
		id: 3,
		title: '专属客服',
		img: '../../static/kefu.png'
	},
	{
		id: 4,
		title: '关于我们',
		img: '../../static/guanyu.png'
	}
];
let handerChange = index => {
	if (index == 0) {
		uni.navigateTo({
			url: '/pages/authentication/authentication'
		});
	} else if (index == 1) {
		uni.navigateTo({
			url: '/pages/feedback/feedback'
		});
	} else if (index == 2) {
		uni.navigateTo({
			url:'/pages/customerservice/customerservice'
		})
	} else if (index == 3) {
		uni.navigateTo({
			url: '/pages/aboutus/aboutus'
		});
	}
};
//退出登录
const loginout = () => {
	uni.clearStorageSync();
	uni.showToast({
		title: '退出登录',
		icon: 'none'
	});
	setTimeout(() => {
		uni.reLaunch({
			url: '/pages/login/login'
		});
	}, 1000);
};
let orderList = ref([]);
const getOrder = () => {
	getOrderList().then(res => {
		orderList.value = res.data;
		console.log(res.data);
	});
};
//跳转到更多认购产品
const getSomeOrder = () => {
	uni.navigateTo({
		url: '/pages/MyOrder/MyOrder'
	});
};
const token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';

//实名认证的状态
let verify = ref();
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
	if (token) {
		getOrder();
		getUserInfo().then(res => {
			verify.value = res.msg.verify;
			userInfo.value = res.msg;
		});
	} else {
		uni.reLaunch({
			url: '/pages/login/login'
		});
	}
});

let handerDtrails = id => {
	uni.navigateTo({
		url: '/pages/myorderdetails/myorderdetails?id=' + id
	});
};
</script>

<style lang="scss">
page {
	background-color: #f6f7fa;
}
.bg-img {
	width: 750rpx;
	height: 560rpx;
	background-image: url('../../static/my-bgimg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0.5rpx;
	.user {
		width: 690rpx;
		height: 182rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 54rpx;
		image {
			width: 103rpx;
			height: 103rpx;
			border-radius: 50%;
		}
		.user-name {
			& > view:nth-child(1) {
				width: 170rpx;
				height: 40rpx;
				border-radius: 19rpx;
				line-height: 40rpx;
			}
			& > view:nth-child(2) {
				width: 170rpx;
				height: 40rpx;
				border-radius: 19rpx;
				line-height: 40rpx;
			}
		}
	}
}
.set {
	width: 690rpx;
	background: #ffffff;
	border-radius: 35rpx;
	.set-item:last-child {
		margin-bottom: 0;
	}
}
.outlogin {
	width: 690rpx;
	height: 107rpx;
	line-height: 107rpx;
	background: rgba(243, 75, 66, 0.04);
	border-radius: 35rpx;
	border: 2rpx solid #e1251b;
	color: #e1251b;
}
</style>
